<!--
 * @Description: monaco-editor源代码编辑器
 * @Author: zhiHong Deng
 * @Date: 2023-06-07 09:07:21
 * @LastEditTime: 2023-06-14 10:06:21
 * @LastEditors: zhiHong Deng
-->
<template>
	<div class="sample-editor">
		<div class="sample-editor-header">
			<div class="sample-editor-header-title">源代码编辑器</div>
			<div class="sample-editor-header-right">
				<div class="sample-editor-header-right-box" @click="play">
					<el-icon :size="12">
						<VideoPlay />
  				</el-icon>
					运行
				</div>
				<div class="sample-editor-header-right-box" @click="refresh">
					<el-icon :size="12">
						<Refresh />
  				</el-icon>
					重置
				</div>
				<div class="sample-editor-header-right-box" @click="onCopy">
					<el-icon :size="12">
						<CopyDocument />
  				</el-icon>
					复制
				</div>
			</div>
		</div>
		<!-- 代码编辑器 -->
		<div ref="editorContainer" class="sample-editor-code"></div>
	</div>
</template>
 
<script setup>
	import { ref, reactive, onMounted, computed, watch, nextTick } from 'vue';
	import { ElMessage } from 'element-plus'
	import { copyText } from 'vue3-clipboard'
	import * as monaco from 'monaco-editor';

	const editorContainer = ref(null);
	const	content = ref(null)
	let editorInstance = null;

	const props = defineProps({
			code: {
				type: String,
				required: true
			},
	})
	watch(
		() => props.code,
		(newValue, oldValue) => {
			content.value = newValue
			if (editorInstance) {
				editorInstance.dispose(); // 销毁之前的编辑器实例
			}
			initCodeContainer();
			if (editorInstance) {
				editorInstance.setValue(newValue);
			}
		}
	)
	const emit = defineEmits(['codeChange'])
	// 初始化代码编辑器
	const initCodeContainer = async () => {
		editorInstance = monaco.editor.create(editorContainer.value, {
			value: props.code,
			minimap: {
        enabled: false // 是否启用预览图
      }, // 预览图设置
			language: 'html', // 可执行的语法
			theme: 'vs-dark',
			automaticLayout: true, // 自动调整布局
			wordWrap: 'on' // 代码超出换行
		});
	}
  // 切换换行设置
  const toggleWordWrap = () => {
    const wordWrap = editorInstance.getOption(monaco.editor.EditorOption.wordWrap);
    const newWordWrap = wordWrap === 'off' ? 'on' : 'off';
    editorInstance.updateOptions({ wordWrap: newWordWrap });
  }
	const	play = () => {
		content.value = editorInstance.getValue();
		// 调用父组件的方法
		emit('codeChange', content.value);
	}
	const	refresh = () => {
		editorInstance.setValue(props.code);
		emit('codeChange', props.code);
	}
		// 复制成功时的回调函数
	const	onCopy = (e) => {
		copyText(content.value, undefined, (error) => {
			if (error) {
				ElMessage.warning(`复制失败: ${error} ！`);
			} else {
				ElMessage.success('内容已复制到剪切板！');
			}
		})
	}
</script>

<style lang="scss" scoped>
.sample-editor {
	height: 100%;
	background-color: #24272d;
	color: #ffff;
	.sample-editor-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 38px;
		padding: 0 1em;
		font-size: 14px;
		&-right {
			display: flex;
			justify-content: space-between;
			width: 35%;
			&-box {
				cursor: pointer;
				color: #45a3ff;
			}
		}
	}
	.sample-editor-code {
    display: block!important;
    height: calc(100vh - 38px);
		width: 100%;
    overflow-y: scroll;
		&::-webkit-scrollbar {
			display: none;
		}
	}
}
</style>
